<template>
  <custom-dialog
    ref="dialog"
    :title="modalTitle" top="10vh"
    :before-confirm="beforeConfirm" :on-confirm="onConfirm"
  >
    <el-form ref="form" :model="info" :rules="rules" label-width="160px">
      <el-form-item label="单位名称" prop="enterpriseName">
        <el-input v-model="info.enterpriseName"></el-input>
      </el-form-item>
      <el-form-item label="所属地区" prop="districtBelong">
        <area-picker ref="areaPicker" v-model="info.districtBelong"></area-picker>
      </el-form-item>
      <el-form-item label="联系电话" prop="unitContactNumber">
        <el-input v-model="info.unitContactNumber"></el-input>
      </el-form-item>
      <el-form-item label="所属行业" prop="belongIndustry">
<!--        <dictionary-picker dic-code="HANG_YE_LEI_XING" v-model="info.belongIndustry"></dictionary-picker>-->
        <industry-picker v-model="info.belongIndustry"></industry-picker>
      </el-form-item>
      <el-form-item label="经纬度" prop="lnglat">
        <el-input v-model="info.lnglat" placeholder="格式如：116.14148,28.587422">
          <template #append>
            <span class="el-icon-location" @click.stop="clickLngLat"></span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="年能耗等级" prop="energyConsumptionLevel">
        <dictionary-picker v-model="info.energyConsumptionLevel" dic-code="NENG_HAO_SHUI_PING"></dictionary-picker>
      </el-form-item>
      <el-form-item label="单位类型" prop="unitType">
        <dictionary-picker filterable clearable dic-code="DAN_WEI_LEI_XING" v-model="info.unitType"></dictionary-picker>
      </el-form-item>
      <el-form-item label="单位地址">
        <el-input v-model="info.address"></el-input>
      </el-form-item>
      <el-form-item label="能管负责人姓名" prop="principal">
        <el-input v-model="info.principal"></el-input>
      </el-form-item>
      <el-form-item label="能管负责人电话" prop="principalPhone">
        <el-input v-model="info.principalPhone"></el-input>
      </el-form-item>
<!--      <el-form-item label="所属领域">-->
<!--        <dictionary-picker dic-code="QI_YE_ZI_DING_YI_QU_YU" v-model="info.belongField"></dictionary-picker>-->
<!--      </el-form-item>-->
      <el-form-item label="企业管理人数">
        <el-input type="number" v-model.number="info.numberOfManagers"></el-input>
      </el-form-item>
    </el-form>
    <location-picker ref="locationPicker" v-model="info.lnglat"></location-picker>
  </custom-dialog>
</template>

<script>
import CustomDialog from '@/components/custom-dialog'
import AreaPicker from '@/components/area-picker'
import DictionaryPicker from '@/components/dictionary-picker'
import LocationPicker from '@/components/location-picker'
import { saveOrUpdate } from '@/api/enterprose'
import REGEXP from '@/utils/regexp'
import IndustryPicker from '@/components/industry-picker'

const api = {
  saveOrUpdate
}

export default {
  name: 'operate-modal',
  components: { IndustryPicker, CustomDialog, LocationPicker, AreaPicker, DictionaryPicker },
  props: {
    modalTitle: String,
    modalData: {
      type: Object,
      default () {
        return {}
      }
    },
  },
  data () {
    return {
      info: {
        // 主键
        id: '',
        // 单位名称
        enterpriseName: '',
        // 社会信用代码
        socialCreditCode: '',
        // 是否央企 0、是；1、否
        centralEnterprises: '1',
        // 法人代码
        corporateCode: '',
        // 所属地区
        districtBelong: '',
        // 单位联系电话
        unitContactNumber: '',
        // 所属行业
        belongIndustry: '',
        // 所属领域
        belongField: '',
        // 是否能源加工转企业 0、是；1、否
        transferEnterprise: '0',
        // 能耗水平
        energyConsumptionLevel: '',
        lnglat: '',
        // 经度
        longitude: '',
        // 纬度
        latitude: '',
        // 单位类型
        unitType: '',
        // 法人代表
        legalRepresentative: '',
        // 单位地址
        address: '',
        // 邮政编码
        zipCode: '',
        // 企业网址
        enterpriseUrl: '',
        // 电子邮箱
        email: '',
        // 传真
        fax: '',
        // 注册日期
        registrationDate: '',
        // 注册资本
        registeredCapital: '',
        // 备注
        remark: '',
        // 所属集团
        affiliatedGroup: '',
        // 集团地址
        groupAddress: '',
        // 集团类型
        groupType: '',
        // 能源管理机构.
        managementAgency: '',
        // 主管节能领导
        supervisor: '',
        // 主管节能领导电话
        supervisorPhone: '',
        // 能管负责人姓名
        principal: '',
        // 能管负责人电话
        principalPhone: '',
        // 能源管理师证号
        managerId: '',
        // 是否能源管理体系认证 0、是；1、否
        managementCertification: '',
        // 认证日期
        certificationDate: '',
        // 认证机构
        certificationBody: '',
        // 企业主要生产线名称
        mainProductionLine: '',
        // 企业主导产品
        leadingProduct: '',
        // 租户ID
        // tenantId: '',
        // 创建时间
        // creationTime: '',
        // 创建用户
        // creationId: '',
        // 修改时间
        // updateTime: '',
        // 修改用户
        // updateId: '',

        // 企业管理人数
        numberOfManagers: '1',
      },
      rules: {
        enterpriseName: [{ required: true, message: '必填项' }],
        unitContactNumber: [
          { required: true, message: '必填项' },
          {
            validator (rule, value, callback) {
              if (REGEXP.PHONE_NUMBER.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的手机号码'))
              }
            }
          }
        ],

        districtBelong: [{ required: true, message: '必填项' }],
        belongIndustry: [{ required: true, message: '必填项' }],
        unitType: [{ required: true, message: '必填项' }],
        lnglat: [{ required: true, message: '必填项' }],
        energyConsumptionLevel: [{ required: true, message: '必填项' }],

        // principal: [{ required: true, message: '必填项' }],
        // principalPhone: [{ required: true, message: '必填项' }],
      },
    }
  },
  methods: {
    open () {
      const isAdd = Object.keys(this.modalData).length === 0
      this.info = isAdd
        ? this.$options.data().info
        : {
            ...this.$options.data().info,
            ...this.modalData,
          }
      const { longitude, latitude } = this.info
      this.info.lnglat = (longitude && latitude) ? `${longitude},${latitude}` : ''
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
      this.$nextTick(() => {
        this.$refs.dialog.open()
      })
    },
    beforeConfirm () {
      return this.$refs.form.validate()
    },
    onConfirm (close) {
      const params = { ...this.info }
      let lnglat = params.lnglat
      lnglat = lnglat.split(',')
      if (lnglat.length === 2) {
        params.longitude = lnglat[0]
        params.latitude = lnglat[1]
      }
      delete params.lnglat
      if (!params.id) {
        delete params.id
      }
      params.districtBelongName = this.$refs.areaPicker.getLabel()
      return api.saveOrUpdate(params).then(res => {
        if (res.code === 200) {
          this.$emit('save-success')
          this.$message.success('保存成功')
          close()
        }
      })
    },
    clickLngLat () {
      this.$refs.locationPicker.open()
    },
  },
}
</script>

<style scoped>

</style>
